@extends('layouts.admin.head')
@section('title')
    新闻数据
@endsection
@section('headStyle')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('plugins/datatables/dataTables.bootstrap.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/fancybox/dist/jquery.fancybox.css')}}">
    <link rel="stylesheet" href="{{asset('css/toastr.min.css')}}">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    <style type="text/css">
        .font_whdth_50{
            width: 50px;
        }
        .font_whdth_100{
            width: 100px;
        }
        .font_whdth_150{
            width: 150px;
        }
        .font_whdth_300{
            width:300px;
        }
        .font_whdth_600{
             width: 600px;
         }
        .user_img{
            width: 56px;
            height: 56px;
            border-radius: 56px;
        }
        .pic_img{
            width: 250px;
            height: 150px;
        }
    </style>
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            图片数据
            <small>全部  图片</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>管理平台</a></li>
            <li><a href="#">数据中心</a></li>
            <li class="active">新闻数据</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="box-footer">
                            <button  type="button" id="pullData" class="btn  btn-info">开始采集数据</button>
                            <button  type="button" id="stopData" class="btn  btn-info">停止采集数据</button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="data" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>头像</th>
                                <th>作者</th>
                                <th>图片</th>
                                <th>内容</th>
                                {{--<th>数据时间</th>--}}
                                <th>赞</th>
                                <th>收藏</th>
                                <th>留言</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($pic as $item)
                                <tr>
                                    <td>{{$item['id']}}</td>
                                    <td><img  class="user_img" src="{{$item['avatar']}}"></td>
                                    <td class="font_whdth_150">{{$item['username']}}</td>
                                    <td class="font_whdth_150">
                                        <a href="{{$item['pic_url']}}" data-fancybox="images">
                                            <img  class="pic_img" src="{{$item['pic_url']}}">
                                        </a>
                                    </td>
                                    <td id="{{$item['id']}}">{{$item['content']}}</td>
                                    <td class="font_whdth_50">{{$item['praise']}}</td>
                                    <td class="font_whdth_50" >{{$item['collect']}}</td>
                                    <td class="font_whdth_50">{{$item['comment']}}</td>
                                    <td  class="font_whdth_150">{{$item['created_at']}}</td>
                                    <td class="font_whdth_100">
                                        <button  type='button' alt="{{$item['id']}}" class='editrow btn btn-primary' data-toggle="modal" data-target="#primaryModal">
                                            <i class='fa fa-edit'></i>
                                        </button>
                                        <button  alt="{{$item['id']}}" class='delrow btn btn-primary' type='button'>
                                            <i class='fa fa-trash-o'></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- Modal -->
    @include('admin.pic.edit')
    <!-- /Modal -->
@endsection
@section('pageInlineScript')
    {{--图片浏览器--}}
    <script src="{{asset('plugins/fancybox/dist/jquery.fancybox.js')}}"></script>
    {{--弹出提示框--}}
    <script src="{{asset('js/pop-message.js')}}"></script>
    {{--操作提示信息--}}
    <script src="{{asset('js/toastr.min.js')}}"></script>
    <script>
        var setOutTime;
        /**
         * 抓取数据
         */
        $('#pullData').click(function () {
            $.ajax({
                type:"GET",
                url:"beginBat",
                data:{
                    type:'pic',
                },
                success: function(){
                    WebDataCrawling();
                    $("#pullData").addClass('disabled')
                }
            });
        })
        /**
         * 停止抓取
         */
        $('#stopData').click(function () {
            clearTimeout(setOutTime);
            $("#pullData").removeClass('disabled')
            $("#pullData").text('开始采集数据');
            console.log('停止数据采集中.....')
        })
        /**
         * 定时重复调用接口刷新数据
        */
        function WebDataCrawling(){
            $("#pullData").addClass('disabled').text('数据正在抓取中...')
            setOutTime = setTimeout(WebDataCrawling,5000);
            $.ajax({
                type:"GET",
                dataType: "json",
                url:"http://www.laravel5.4.app:8888/",
                success: function(data){
                    console.log(data);
                }
            });
        }
        /**
         *模态框初始化加载
         */
        $("#primaryModal").on('show.bs.modal', function (e) {
            var _this = $(e.relatedTarget).parent().siblings();
            var pic_url = _this.eq(3).children('a').children('img').attr('src');
            console.log(pic_url);
            $('#news_id').val(_this.eq(0).html());
            $('#username').val(_this.eq(2).html());
            $('#pic_url').attr("src",pic_url);
            $('#content').val(_this.eq(4).html());
            $('#created_at').val(_this.eq(8).html());
        })
        /**
         *保存修改的数据
         */
        $("#but_save").click(function () {
            var news_id = $("#news_id").val();
            var content = $("#content").val();
            if(news_id!=''){
                $.ajax({
                    type: "post",
                    url:'/admin/new/update',
                    data:{news_id:news_id, content:content},
                    headers: {'X-CSRF-TOKEN':'{{csrf_token()}}'},
                    success: function (data) {
                        if (data.code=='0') {
                            $('#'+news_id).html(content);
                            console.log('更新数据成功!')
                        }else{
                            console.log('更新数据失败!')
                        }
                        $('#primaryModal').modal('hide');
                    },
                    error: function () {
                        console.log('更新数据失败!')
                    }
                });
            }
        })
        // 数据删除
        $(".delrow").on('click', function () {
            var new_id = $(this).attr('alt');
            var obj = $(this).parent('td').parent('tr');
            Ewin.confirm({message:"确认要删除选择的数据吗？"}).on(function(e) {
                if (!e) {
                    return;
                }
                $.ajax({
                    type: "delete",
                    url:'/admin/new/'+new_id,
                    headers: {'X-CSRF-TOKEN':'{{csrf_token()}}'},
                    success: function (data) {
                        if (data.code=='0') {
                            toastr.success('新闻删除成功!');
                            obj.remove();
                            table.ajax.reload();
                        }
                    },
                    error: function () {
                        toastr.error('新闻删除失败!');
                    }
                });
            });
        });
    </script>
@endsection